<template>
  <div class="houses">
    <div class="box">
      <van-search
        v-model="value"
        show-action
        background="#4fc08d"
        placeholder="请输入小区或地址"
      >
        <template #label>
          <div @click="$router.push('/city')">
            {{ currentCity.city }} &nbsp;<van-icon name="arrow-down" />
          </div>
        </template>
        <template #left>
          <div class="lefticon">
            <van-icon
              @click="$router.back()"
              name="arrow-left"
              color="#fff"
              size="23px"
            />
          </div>
        </template>
        <template #action>
          <div><van-icon color="#fff" name="location-o" size="23px" /></div>
        </template>
      </van-search>
      <my-dropdown
        v-if="condition"
        :queryObj="queryObj"
        :condition="condition"
      />
    </div>
    <!-- <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell />
      <my-list-item
        :row="item"
        v-for="(item, index) in houseList"
        :key="index"
      />
    </van-list> -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCondition, getHouse } from '@/api/houseList.js'
// import MyListItem from '../../components/MyListItem.vue'
import MyDropdown from './components/MyDropdown.vue'
function setLabel (obj) {
  for (const key in obj) {
    if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
      obj[key].forEach((item) => {
        item.text = item.label
        item.id = item.value
      })
    } else if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
      setLabel(obj[key])
    }
  }
}
export default {
  components: { MyDropdown },
  data () {
    return {
      activeIndex: 1,
      // 房屋查询条件
      condition: null,
      value: '',
      // 渲染列表
      houseList: [],
      loading: false,
      finished: false,
      error: false,
      count: 0,
      page: 1
    }
  },
  computed: {
    ...mapState(['currentCity']),
    queryObj () {
      return {
        cityId: this.$store.state.currentCity.id,
        subway: null,
        area: null,
        rentType: null,
        price: null,
        start: (this.page - 1) * 20 + 1,
        end: this.page * 20
      }
    }
  },
  created () {
    this.getDemo()
  },

  methods: {
    async getDemo () {
      try {
        const res1 = await getCondition(this.currentCity.id)
        setLabel(res1.data.body)
        this.condition = res1.data.body
      } catch (err) {
        console.log(err.message)
      }
    },
    async onLoad () {
      // 异步更新数据
      try {
        const res = await getHouse(this.queryObj)
        this.houseList.push(...res.data.body.list)
        this.count = res.data.body.count
        this.page++
      } catch (err) {
        this.error = true
      }
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.houseList.length >= this.count) this.finished = true
    }
  }
}
</script>

<style scoped lang="less">
.houses {
  padding-top: 90px;
  .box {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  .lefticon {
    padding: 5px;
  }
}
</style>
